<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件修饰符</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>

<div id="app_xs_1">
    <!--1.    .stop 防止冒泡  .self 只监听触发该元素的事件-->
    <!--    <div @click="outClick" style="width: 200px;height: 200px;background: red; padding: 10px">-->
    <!--        <div @click.stop="innerClick" style="width: 120px;height: 120px;background: green;padding: 10px">-->
    <!--            <input @click.self="btnClick" type="button" value="click me">-->
    <!--        </div>-->
    <!--    </div>-->

    <!--2.   .prevent 阻止默认事件 .once 只触发一次 , 此处会阻止一次默认行为-->
    <!--    <a href="http://www.baidu.com" @click.prevent.once>百度</a>-->

    <!--3.   .capture - 阻止捕获, 此例中当点击btnClick 时， 触发顺序是：innerClick, btnClick ,outClick-->
    <!--    <div @click="outClick" style="width: 200px;height: 200px;background: red; padding: 10px">-->
    <!--        <div @click.capture="innerClick" style="width: 120px;height: 120px;background: green;padding: 10px">-->
    <!--            <input @click="btnClick" type="button" value="click me">-->
    <!--        </div>-->
    <!--    </div>-->


    <!--鼠标事件修饰符  .left - 左键事件  .right - 右键事件  .middle - 中间滚轮事件-->
    <!--    <input type="button" value="鼠标左键" @click.left="mLeft">-->
    <!--    <input type="button" value="鼠标右键" @click.right.stop="mRight">-->
    <!--    <input type="button" value="鼠标滚轮" @click.middle="mMiddle">-->


    <!--按键事件修饰符     -->
    <input @keyup.enter="enter">
</div>

<script>
    let v = new Vue({
        el: '#app_xs_1',
        data: {},
        methods: {
            outClick: function () {
                console.log('outClick');
            },
            innerClick: function () {
                console.log('innerClick');
            },
            btnClick: function () {
                console.log('btnClick')
            },

            mLeft: function () {
                console.log('mLeft')
            },
            mRight: function () {
                console.log('mRight')
            },
            mMiddle: function () {
                console.log('mMiddle')
            },

            enter: function () {
                console.log('enter')
            }

        }
    });
</script>

</body>
</html>